<template>
  <div class="content-linear">
    <!-- 头部导航 -->
    <div class="header">
      <van-icon name="arrow-left" color="#fff" class="header1" @click="xxx"/>
      <span>消息</span>
      <van-icon name="notes-o" color="#fff" class="header2" />
      <van-icon name="setting-o" color="#fff" class="header3" />
    </div>
    <!-- 物流信息 -->
    <van-cell-group inset class="group" size="large">
      <van-badge>
        <div class="child" style="background-color: #00ff9b">
          <van-icon name="cart-o" class="icon" size="40" color="#fff" />
        </div>
        <p>交易信息</p>
      </van-badge>
      <van-badge>
        <div class="child" style="background-color: #00c6ff">
          <van-icon name="comment-o" class="icon" size="40" color="#fff" />
        </div>
        <p>互动消息</p>
      </van-badge>
      <van-badge>
        <div class="child" style="background-color: #ff9900">
          <van-icon name="balance-pay" class="icon" size="40" color="#fff" />
        </div>
        <p>账户通知</p>
      </van-badge>
      <van-badge>
        <div class="child" style="background-color: #00ffc8">
          <van-icon name="bullhorn-o" class="icon" size="40" color="#fff" />
        </div>
        <p>服务通知</p>
      </van-badge>
    </van-cell-group>
    <!-- 滚动通知 -->
    <div class="message">
      <van-notice-bar
        left-icon="volume-o"
        text="您好，YONGQUAN保冷保温大容量户外水壶家用款降价啦！！"
      />
    </div>
    <!-- 商家信息 -->
    <div class="chat">
      <img
        class="avt"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        alt=""
      />
      <div class="t1">
        优惠促销
        <div class="time">10:06</div>
      </div>
      <br />
      <div class="t2">这是您的专属福利哦，快打开看看吧~</div>
    </div>
    <div class="chat">
      <img
        class="avt"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        alt=""
      />
      <div class="t1">
        优惠促销
        <div class="time">星期六</div>
      </div>
      <br />
      <div class="t2">这是您的专属福利哦，快打开看看吧~</div>
    </div>

    <!-- 官方信息 -->
  </div>
</template>

<script>
export default {
  name: "Logistics",
  methods: {
    xxx(){
      this.$router.push('/person') 
    }
  },
};
</script>

<style lang="less">
.content-linear {
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, white 0%, white 75%, red 0%, red 50%);
  .header {
    width: 100%;
    padding-top: 0.2rem;
    .header1 {
      padding-left: 0.1rem;
    }
    span {
      color: #fff;
      font-size: 0.54rem;
      padding-left: 3.8rem;
    }
    .header2 {
      padding-left: 2.8rem;
    }
    .header3 {
      padding-left: 0.1rem;
    }
  }
  .group {
    &:first-child {
      background-color: green;
    }
    margin-top: 0.5rem;
    p {
      font-size: 0.32rem;
      padding-left: 0.7rem;
    }
    .child {
      width: 1.8rem;
      height: 1.8rem;
      background: #f2f3f5;
      border-radius: 50%;
      margin-left: 0.4rem;
      margin-top: 0.3rem;
      .icon {
        padding: 0.35rem 0 0 0.35rem;
      }
    }
  }
  .message {
    margin-top: 0.373rem;
  }
  .chat {
    margin-top: 0.373rem;
    height: 2.133rem;
    .avt {
      float: left;
      border-radius: 50%;
      width: 1.867rem;
      height: 1.867rem;
      margin-left: 0.133rem;
    }
    .t1 {
      float: left;
      font-size: 0.587rem;
      margin-left: 0.133rem;
      margin-top: 0.133rem;
      width: 7.57rem;
      font-weight: 500;
      .time {
        float: right;
        right: 5px;
        color: rgb(133, 132, 132);
        font-size: 0.427rem;
      }
    }
    .t2 {
      float: left;
      font-size: 0.427rem;
      color: rgb(133, 132, 132);
      margin-left: 0.133rem;
      margin-top: 0.347rem;
    }
  }
}
</style>